html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        link(rel="stylesheet", href="css/style.css")
        script(src="js/jquery.min.js")
        title 注册
    body
        include ./components/header.jade
        form(class='signDiv',action='/signup',method='post',enctype="multipart/form-data")
            mixin tableRow(titleName,type,placeholderName,name,info)
                div.tableRow
                    div.rowTitle= titleName
                        span.star *
                    input(type=type,placeholder=placeholderName,name=name)
                    span.infoSty= info
            +tableRow('用户名','text','用户名','name','用户名必须为1-10个字符')
            +tableRow('密码','password','密码','password','密码必须大于6个字符')
            +tableRow('重复密码','password','重复密码','repassword','两次密码输入不一致')
            +tableRow('头像','file','','file','文件不能为空')
            input.signBtn(type="submit",value="注册")
        
        script.
            window.onload=function (){
                var username=document.getElementsByName('name')[0];
                var infoSty=document.getElementsByClassName('infoSty');
                var password=document.getElementsByName('password')[0];
                var repassword=document.getElementsByName('repassword')[0];
                var imgFile=document.getElementsByName('file')[0]
                
                username.onblur = function() {
                    if(!(username.value.length >= 1 && username.value.length <= 10)){
                        infoSty[0].style.display='inline'
                    }
                };
                
                username.onfocus = function() {
                    infoSty[0].style.display='none'
                }

                password.onblur = function(){
                    if(password.value.length < 6){
                        infoSty[1].style.display='inline'
                    }

                }
               
                password.onfocus = function(){
                     infoSty[1].style.display='none'
                }

                repassword.onblur = function(){
                    if(password !== repassword){
                        infoSty[2].style.display='inline' 
                    }
                }

                repassword.onfocus = function(){
                     infoSty[2].style.display='none'
                }

                imgFile.onblur = function(){
                    if(!(imgFile.files.size>0)){
                        infoSty[3].style.display='inline' 
                    }
                }

                imgFile.onfocus = function(){
                    infoSty[3].style.display='none'
                }
            
            };
         
        
                